<template>
  <el-main>
    <el-divider content-position="left">党员数据统计</el-divider>
    <!--          党员性别年龄饼图 + 党龄柱状图   此处还想加一个党员活跃度排行榜，展示论坛和活动积极参与的党员-->
    <div class="two_chart_line">
      <el-card class="left_card_of_2charts"
               shadow="hover"
               :body-style="{ padding: '5px'}">
        <div id="cpc_member_chart"
             style="width: 450px; height: 300px" />
      </el-card>
      <el-card id="cpc_age_chart_card"
               shadow="hover"
               :body-style="{ padding: '5px'}">
        <div id="cpc_age_chart"
             style="width: 450px; height: 300px" />
      </el-card>
    </div>
    <!--          党员活跃度榜单前十名-->
    <el-card shadow="hover"
             :body-style="{ padding: '5px'}"
             style="margin-top: 10px;">
      <div style="font-size: large;font-weight: bolder; margin: 15px auto; text-align: center">党员活跃度榜单前十名</div>
      <el-table :data="active_cpc_member_data"
                :cell-style="{padding: '5px 0', textAlign: 'center'}"
                :header-cell-style="{textAlign: 'center'}"
                highlight-current-row
                height="250"
                border
                style="width: 85%; margin: 5px auto">
        <el-table-column prop="index"
                         label="排名" />
        <el-table-column prop="name"
                         label="姓名" />
        <el-table-column prop="gender"
                         width="50"
                         label="性别" />
        <el-table-column prop="age"
                         width="60"
                         label="年龄" />
        <el-table-column prop="cpc_age"
                         width="60"
                         label="党龄" />
        <el-table-column prop="signs"
                         label="活动报名/次" />
        <el-table-column prop="joins"
                         label="参与活动/次" />
        <el-table-column prop="posts"
                         label="发帖讨论/条" />
        <el-table-column prop="comments"
                         label="评论互动/次" />
      </el-table>
    </el-card>

    <el-divider content-position="left">论坛数据统计</el-divider>
    <div class="bbs_stats_container">
      <!--            论坛热度热力图-->
      <div class="heat_chart_container">
        <el-card shadow="hover"
                 :body-style="{ padding: '5px'}"
                 style="margin-bottom: 10px">
          <h3 style="text-align: center">党员论坛热度统计图</h3>
          <el-row>
            <el-col span="8"
                    offset="8">
              <el-date-picker v-model="heat_data_range"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期" />
            </el-col>
            <el-col span="1"
                    offset="1">
              <el-button icon="el-icon-search"
                         circle
                         @click="draw_cpc_bbs_heat_chart" />
            </el-col>
          </el-row>
          <div id="cpc_bbs_heat_chart"
               style="width: 900px; height: 250px; margin: 0 auto" />
        </el-card>
      </div>
      <!--            词云图和论坛管理数据统计表-->
      <div class="two_chart_line">
        <el-card class="left_card_of_2charts"
                 shadow="hover"
                 :body-style="{ padding: '5px'}">
          <h3 style="text-align: center">{{ this.heat_data_range[0].getFullYear() }}年度党员论坛热度统计图</h3>
          <div id="mywordcloud"
               :style="{width: '600px', height: '280px'}"
               :data="word_data"
               style="display: inline-block" />
        </el-card>
        <el-card shadow="hover"
                 :body-style="{ padding: '5px'}">
          <h3 style="text-align: center">论坛管理工作量化表</h3>
          <!--                表格内容：处理举报信息xx条，处理违规发言xx人次，宣传互动xxx次，论坛日均活跃人数xx人，日均新增内容xx条，日均互动数xx条，-->
          <div style="width: 400px; height: 280px; display: inline-block;">
            <div style="width: 100%; text-align: center">
              <el-date-picker v-model="bbs_stats_range"
                              size="mini"
                              style="width: 250px; margin: 0 10px;"
                              type="daterange"
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期" />
              <el-button size="mini"
                         icon="el-icon-search"
                         circle />
            </div>
            <table border="0"
                   style="margin: 20px auto; width: 300px; text-align: center"
                   cellpadding="6"
                   cellspacing="0">
              <tr>
                <td>论坛日均访问量</td>
                <td>179人次</td>
              </tr>
              <tr>
                <td>日均活跃人数</td>
                <td>52人</td>
              </tr>
              <tr>
                <td>日均新增内容</td>
                <td>13条</td>
              </tr>
              <tr>
                <td>日均互动数</td>
                <td>41条</td>
              </tr>
              <tr>
                <td>宣传互动</td>
                <td>219次</td>
              </tr>
              <tr>
                <td>处理举报信息</td>
                <td>36条</td>
              </tr>
              <tr>
                <td>处理违规发言</td>
                <td>49人次</td>
              </tr>
            </table>
          </div>
        </el-card>
      </div>
    </div>

    <el-divider content-position="left">活动数据统计</el-divider>
    <div class="two_chart_line">
      <el-card class="left_card_of_2charts"
               shadow="hover"
               :body-style="{ padding: '5px'}">
        <div id="activity_bubble_chart"
             :style="{width: '310px', height: '350px'}" />
      </el-card>
      <el-card shadow="hover"
               :body-style="{ padding: '5px'}">
        <h3 style="text-align: center; max-height: 50px">党建活动组织工作量化表</h3>
        <!--表格内容：组织活动xx项，总活动时长xxx小时，活动报名xxx人次，实际参与xxx人次，活动宣传xx条，宣传信息阅读量xxxx人次-->
        <div style="width: 500px; height: 300px; ">
          <div style="width: 100%; text-align: center">
            <el-date-picker v-model="activity_stats_range"
                            size="mini"
                            style="width: 250px; margin: 0 10px;"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期" />
            <el-button size="mini"
                       icon="el-icon-search"
                       circle />
          </div>
          <table border="0"
                 style="margin: 20px auto; max-height: 300px; width: 350px; text-align: center"
                 cellpadding="7"
                 cellspacing="0">
            <tr>
              <td>共组织活动</td>
              <td>29项</td>
            </tr>
            <tr>
              <td>总活动时常</td>
              <td>38小时</td>
            </tr>
            <tr>
              <td>活动报名</td>
              <td>159人次</td>
            </tr>
            <tr>
              <td>实际参与</td>
              <td>167人次</td>
            </tr>
            <tr>
              <td>活动宣传</td>
              <td>36条</td>
            </tr>
            <tr>
              <td>宣传信息阅读量</td>
              <td>537人次</td>
            </tr>
          </table>
        </div>
      </el-card>
    </div>
  </el-main>
</template>

<script>
import * as echarts from 'echarts'
import 'echarts-wordcloud/dist/echarts-wordcloud'
import 'echarts-wordcloud/dist/echarts-wordcloud.min'

export default {
  name: "stats",
  data () {
    return {
      // 活跃党员列表
      active_cpc_member_data: [
        {
          index: '1',
          name: '毛凤英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '2',
          name: '李大钊',
          gender: '男',
          age: '66',
          cpc_age: '46',
          signs: '10',
          joins: '9',
          posts: '14',
          comments: '57'
        },
        {
          index: '3',
          name: '胡适',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '9',
          joins: '9',
          posts: '31',
          comments: '69'
        },
        {
          index: '4',
          name: '叶剑英',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '5',
          name: '刘少奇',
          gender: '男',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '6',
          name: '江姐',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '7',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '8',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '9',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        },
        {
          index: '10',
          name: '李兰英',
          gender: '女',
          age: '51',
          cpc_age: '30',
          signs: '12',
          joins: '12',
          posts: '31',
          comments: '69'
        }
      ],
      // 热力图时间范围
      heat_data_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      // 论坛统计表时间范围
      bbs_stats_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      // 活动统计表时间范围
      activity_stats_range: (() => {
        const end = new Date()
        const start = new Date('1/1/2021')
        return [start, end]
      })(),
      // 词云数据
      word_data: [
        {
          name: '十九大精神',
          value: 15000
        },
        {
          name: '两学一做',
          value: 10081
        }, {
          name: '中华民族',
          value: 9386
        },
        {
          name: '马克思主义',
          value: 7500
        },
        {
          name: '民族复兴',
          value: 7500
        },
        {
          name: '社会主义制度',
          value: 6500
        },
        {
          name: '国防白皮书',
          value: 6500
        },
        {
          name: '创新',
          value: 6000
        },
        {
          name: '民主革命',
          value: 4500
        },
        {
          name: '文化强国',
          value: 3800
        },
        {
          name: '国家主权',
          value: 3000
        },
        {
          name: '伟大复兴',
          value: 2500
        },
        {
          name: '领土完整',
          value: 2300
        },
        {
          name: '安全',
          value: 2000
        },
        {
          name: '从严治党',
          value: 1900
        },
        {
          name: '现代化经济体系',
          value: 1800
        },
        {
          name: '国防动员',
          value: 1700
        },
        {
          name: '信息化战争',
          value: 1600
        },
        {
          name: '局部战争',
          value: 1500
        },
        {
          name: '教育',
          value: 1200
        },
        {
          name: '中国梦',
          value: 1100
        },
        {
          name: '孙子兵法',
          value: 900
        },
        {
          name: '一国两制',
          value: 800
        },
        {
          name: '特色社会主义思想',
          value: 700
        }
      ],
    }
  },
  mounted () {
    this.draw_cpc_member_pie_chart()
    this.draw_cpc_age_bar_chart()
    this.draw_cpc_bbs_heat_chart(this.heat_data_range[0], this.heat_data_range[1])
    this.draw_word_cloud_chart()
    this.draw_activity_bubble_chart()
  },
  methods: {
    draw_cpc_member_pie_chart () {
      const myChart = echarts.init(document.getElementById('cpc_member_chart'))
      var option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        title: {
          text: '党员总人数：111人',
          x: 'left',
          y: 'top'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '性别',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '25%'],
            label: {
              position: 'inner',
              fontSize: 12
            },
            data: [
              { value: 64, name: '男' },
              { value: 47, name: '女' }
            ]
          },
          {
            name: '年龄',
            type: 'pie',
            radius: ['35%', '50%'],
            startAngle: 180,
            itemStyle: {
              // borderRadius: 20,
              // // borderColor: '#fff',
              // borderWidth: 2,
              labelLine: {
                normal: {
                  length: 2
                }
              }
            },
            data: [
              { value: 24, name: '30岁及以下' },
              { value: 19, name: '31-40岁' },
              { value: 37, name: '41-50岁' },
              { value: 20, name: '51-60岁' },
              { value: 11, name: '61岁及以上' }
            ]
          }
        ]
      }
      myChart.setOption(option)
    },
    draw_cpc_age_bar_chart () {
      var app = {}
      var posList = [
        'left', 'right', 'top', 'bottom',
        'inside',
        'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
        'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
      ]
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos
            return map
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      }

      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15
      }

      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('cpc_age_chart'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '党龄统计图',
          x: 'center',
          y: 'bottom'
        },
        color: ['#5470c6', '#fac858', '#91cc75'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['全部', '男', '女']
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'center',
          feature: {
            magicType: { show: true, type: ['stack', 'tiled'] },
            saveAsImage: { show: true }
          }
        },
        xAxis: [
          {
            type: 'category',
            name: '党龄',
            axisTick: { show: false },
            data: ['1年以内', '1-5年', '5-10年', '10-20年', '20年以上']
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '人数'
          }
        ],
        series: [
          {
            name: '男',
            type: 'bar',
            barGap: 0,
            emphasis: {
              focus: 'series'
            },
            data: [22, 36, 51, 16, 12]
          },
          {
            name: '女',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [32, 30, 31, 32, 18]
          }
        ]
      })
    },
    getVirtulData (start_date, end_date) {
      // console.log('这里', start_date.toString(), end_date.toString())
      var s_year = start_date.getFullYear()
      var s_month = start_date.getMonth()
      var s_day = start_date.getDate()
      var e_year = end_date.getFullYear()
      var e_month = end_date.getMonth()
      var e_day = end_date.getDate()
      var date = +echarts.number.parseDate(s_year + '-' + s_month + '-' + s_day)
      var end = +echarts.number.parseDate(e_year + '-' + e_month + '-' + e_day)
      var dayTime = 3600 * 24 * 1000
      var data = []
      for (var time = date; time <= end; time += dayTime) {
        data.push([
          echarts.format.formatTime('yyyy-MM-dd', time),
          Math.floor(Math.random() * 100)
        ])
      }
      // console.log('执行到这')
      return data
    },
    draw_cpc_bbs_heat_chart () {
      var option = {
        visualMap: {
          min: 0,
          max: 100,
          calculable: true,
          orient: 'horizontal',
          left: 'right',
          top: 'top'
        },
        tooltip: {
          position: 'top'
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        calendar: [{
          range: this.heat_data_range[0].getFullYear(),
          cellSize: [15, 20]
        }],

        series: [{
          type: 'heatmap',
          coordinateSystem: 'calendar',
          calendarIndex: 0,
          data: this.getVirtulData(this.heat_data_range[0], this.heat_data_range[1])
        }]
      }
      const myChart = echarts.init(document.getElementById('cpc_bbs_heat_chart'))
      myChart.setOption(option)
    },
    draw_word_cloud_chart () {
      const myChart = echarts.init(document.getElementById('mywordcloud'))
      // console.log('lll');
      var option = {
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        backgroundColor: '#fff',
        series: [
          {
            type: 'wordCloud',
            gridSize: 10,
            sizeRange: [14, 60],
            rotationRange: [0, 0],
            textStyle: {
              normal: {
                color: function () {
                  return (
                    'rgb(' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ', ' +
                    Math.round(Math.random() * 255) +
                    ')'
                  )
                }
              }
            },
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            width: '200%',
            height: '200%',
            // 数据
            data: this.word_data
          }
        ]
      }
      myChart.setOption(option)
    },
    draw_activity_bubble_chart () {
      const myChart = echarts.init(document.getElementById('activity_bubble_chart'))
      var month = ['1月', '2月', '3月', '4月', '5月', '6月', '7月',
        '8月', '9月', '10月', '11月', '12月']
      var days = ['周一', '周二',
        '周三', '周四', '周五', '周六', '周日']
      // [星期，月份，大小]
      var data = [[0, 0, 0], [0, 1, 1], [0, 2, 0], [0, 3, 2], [0, 4, 1], [0, 5, 0], [0, 6, 5], [0, 7, 2], [0, 8, 0], [0, 9, 0], [0, 10, 0], [0, 11, 2], [1, 0, 0], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], [1, 5, 0], [1, 6, 2], [1, 7, 0], [1, 8, 0], [1, 9, 0], [1, 10, 0], [1, 11, 2], [2, 0, 1], [2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0], [2, 6, 3], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 1], [2, 11, 2], [3, 0, 0], [3, 1, 3], [3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 4], [3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 0], [3, 11, 4], [4, 0, 1], [4, 1, 3], [4, 2, 0], [4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], [4, 8, 0], [4, 9, 2], [4, 10, 0], [4, 11, 4], [5, 0, 0], [5, 1, 1], [5, 2, 0], [5, 3, 3], [5, 4, 0], [5, 5, 0], [5, 6, 3], [5, 7, 0], [5, 8, 2], [5, 9, 0], [5, 10, 0], [5, 11, 1], [6, 0, 0], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0], [6, 5, 0], [6, 6, 6], [6, 7, 6], [6, 8, 0], [6, 9, 0], [6, 10, 1], [6, 11, 0]]
      var option = {
        title: {
          text: '党建活动数据气泡图'
        },
        legend: {
          data: ['党建活动'],
          left: 'right'
        },
        polar: {},
        tooltip: {
          formatter: function (params) {
            return params.value[2] + ' in ' + days[params.value[0]] + ' of ' + month[params.value[1]]
          }
        },
        toolbox: {
          show: true,
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
          feature: {
            saveAsImage: { show: true }
          }
        },
        angleAxis: {
          type: 'category',
          data: month,
          boundaryGap: false,
          splitLine: {
            show: true
          },
          axisLine: {
            show: false
          }
        },
        radiusAxis: {
          type: 'category',
          data: days,
          axisLine: {
            show: false
          },
          axisLabel: {
            rotate: 45
          }
        },
        series: [{
          name: '党建活动',
          type: 'scatter',
          coordinateSystem: 'polar',
          symbolSize: function (val) {
            return val[2] * 4
          },
          data: data,
          animationDelay: function (idx) {
            return idx * 5
          }
        }]
      }
      myChart.setOption(option)
    },
  }
}
</script>

<style scoped>
.right_float {
  display: flex;
  justify-content: flex-end;
}
.two_chart_line div {
  display: inline-block;
}
.two_chart_line {
  display: flex;
  justify-content: center;
}
.left_card_of_2charts {
  margin-right: 30px;
}
table,
table tr th,
table tr td {
  border: 1px solid lightgray;
  font-size: small;
}
</style>
